<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:fmt="http://java.sun.com/jsp/jstl/fmt">
<head>
    <meta charset="utf-8">
    <title>个人信息</title>
    <link rel="stylesheet" href="/admin/css/pearButton.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css" />
    <style>
        .pear-container {
            background-color: whitesmoke;
            margin: 10px;
        }
        .layui-body{
            padding: 25px;
        }
        .text-center{
            text-align: center;
        }
        .user-info-head{
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }
        .layui-line-dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">头像展示</div>

            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info-head" id="userInfoHead">
                        <img th:src="${session.trackUser.avatarPath}" width="115px" height="115px" alt="">
                    </div>
                    <h2 style="padding-top: 20px;font-size: 20px;"><shiro:principal/></h2>
                    <p style="padding-top: 8px;margin-top: 10px;">海纳百川，有容乃大</p>
                </div>
                <div class="layui-text" style="padding-top: 30px;">

                </div>
<!--                src="../../admin/images/avatar.jpg"-->
                <div>
                    <div class="process-title" style="position: absolute;margin-top: -6px;">
                        &nbsp;&nbsp;完 成 度 :
                    </div>
                    <div style="margin-top: 28px;width: 65%;margin-left: 80px;" class="layui-progress">
                        <div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
                    </div>
                    <br>
                    <div class="process-title" style="position: absolute;margin-top: 7px;">
                        &nbsp;&nbsp;容 错 率 :
                    </div>
                    <div class="layui-progress" style="margin-top: 15px;width: 65%;margin-left: 80px;">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="40%"></div>
                    </div>
                    <br>
                    <div class="process-title" style="position: absolute;margin-top: 7px;">
                        &nbsp;&nbsp;健 康 度 :
                    </div>
                    <div class="layui-progress" style="margin-top: 15px;width: 65%;margin-left: 80px;">
                        <div class="layui-progress-bar layui-bg-green" lay-percent="88%"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">个人信息 </div>
            <div class="layui-card-body">
                <div class="layui-form user-info-form layui-text" style="max-width: 400px;padding-top: 25px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">企业邮箱:</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" value="peardesign@alipay.com" class="layui-input" lay-verify="required"
                                   required="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">账户名称:</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" value="就眠仪式" class="layui-input" lay-verify="required" required="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">个人简介:</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="个人简介" class="layui-textarea">帅气逼人</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">街道地址:</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" value="高新区工专路 77 号" class="layui-input" lay-verify="required" required="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系电话:</label>
                        <div class="layui-input-block">
                            <input type="text" name="address" value="1555555555" class="layui-input" lay-verify="required" required="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="pear-btn pear-btn-success" lay-filter="userInfoSubmit" lay-submit="">
                                更新信息
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>
    layui.use(['element'], function() {
        var element = layui.element;

    })
</script>
</body>
</html>
